<!-- 商品 -->
<template>
	<view class="goods">
		<view class="goods_box">
		<!-- 轮播图 -->
		<view class="banner" @click="toPage(choose_url)">
			<banner-list :banners="base_info.bannerfoods" background="#FF504C" :heightFix="true" swiperHeight="272rpx" >
			</banner-list>
		</view>
		<!-- 菜单 -->
		<view class="goods_menu">
			<view class="menu_card" v-for="(item,index) in menus" :key="item.id" @click="toPage(item.url)">
				<image :src="item.img"  ></image>
				<view class="menu_name">{{item.name}}</view>
			</view>
		</view>
		<!-- 积分 -->
		<view class="score">
			<view class="score_card" v-for="(item,index) in scores" :key="item.id" >
					<view class="card_name">{{item.num}}</view>
					<view class="card_type">{{item.type}}</view>
					<view class="card_bottom" @click="toPage(item.url)">
						<view class="bottom_left">{{item.btn}}</view>
					</view>
			</view>
		</view>
		</view>
		<dropdown-menu  :top="top" @selectOption="selectOption"></dropdown-menu>
		<!-- 商品列表 -->
		<view class="goods_list">
		<goods-list :goods_data="goods"></goods-list>
		</view>
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		computed: {
			// 获取vuex 数据
			...mapState({
				base_info: state => state.init.goods_detail.base_info, // banner信息 - 商品基本信息
				goods: state => state.init.goods,
			}),
		},
		watch: {},
		methods: {
				toPage(val) {
					uni.navigateTo({
						url: val
					})
				},
			upcomment() {    // 好评排序
				this.goods.sort((a,b)=>{
					return b.comment.length - a.comment.length;
				 })
			  },
			downcomment() {    // 差评排序
				this.goods.sort((a,b)=>{
					return a.comment.length - b.comment.length;
				 })
			  },
			upexchage() {    // 兑换最多排序
				this.goods.sort((a,b)=>{
					return b.exchange - a.exchange;
				 })
			  },
			downexchage() {    // 兑换最少排序
				this.goods.sort((a,b)=>{
					return a.exchange - b.exchange;
				 })
			  },
			updistance() {    // 最远排序
				this.goods.sort((a,b)=>{
					return b.distance - a.distance;
				 })
			  },
			downdistance() {    // 最近排序
				this.goods.sort((a,b)=>{
					return a.distance - b.distance;
				 })
			  },
			selectOption(active, index) {
				if(active === 0) {
					this.show_index = index
					switch(true){
						case this.show_index == 0:
							this.$store.dispatch('init/get_goods' ,this.goods_list)
							break;
						case this.show_index == 1:
							let newArr =  this.goods_list.filter(item => item.category.indexOf('商品') != -1)
							this.$store.dispatch('init/get_goods', newArr);
							break;
						case this.show_index == 2:
							let newArr1 =  this.goods_list.filter(item => item.category.indexOf('商家') != -1)
							this.$store.dispatch('init/get_goods', newArr1);
							break;
						case this.show_index == 3:
							let newArr2 =  this.goods_list.filter(item => item.category.indexOf('电影票') != -1)
							this.$store.dispatch('init/get_goods', newArr2);
							break;
						default:
							break;
					}
				}
				if(active === 1) {
					this.show_sort = index
					switch(true){
						case this.show_sort == 1:
							this.upcomment();
							break;
						case this.show_sort == 2:
							this.downcomment();
							break;
						default:
							break;
					}
				}
				if(active === 2) {
					this.show_sort = index
					switch(true){
						case this.show_sort == 1:
							this.upexchage();
							break;
						case this.show_sort == 2:
							this.downexchage();
							break;
						default:
							break;
					}
				}
				if(active === 3) {
					this.show_sort = index
					switch(true){
						case this.show_sort == 1:
							this.updistance();
							break;
						case this.show_sort == 2:
							this.downdistance();
							break;
						default:
							break;
					}
				}
			}
		},

		// 监听滚动高度
		onPageScroll(e) {

		},
		mounted() {
			this.goods_list = this.goods;
			// console.log(this.goods_list,"goods_list")
		},
		data() {
			return {
				goods_list: [],
				show_index: 0,
				show_sort: 0,
				choose_url:"/pages/goods/choiceness/index",
				scores: [{
						id: 0,
						num: 9999999,
						type: "当前积分",
						btn: "去兑换",
						url: "/pages/order/index",
					},
					{
						id: 1,
						num: 8800,
						type: "已用积分",
						btn: "赚积分",
						url: "/pages/user/score/earn/index"
					},
				],
				menus: [ //菜单
					{
						id: 0,
						name: "精选专区",
						img: "/static/img/icon_01.png",
						url: "/pages/goods/choiceness/index",
					},
					{
						id: 1,
						name: "家用电器",
						img: "/static/img/icon_02.png",
						url: "/",
					},
					{
						id: 2,
						name: "居家生活",
						img: "/static/img/icon_03.png",
						url: "/",
					},
					{
						id: 3,
						name: "母婴亲子",
						img: "/static/img/icon_04.png",
						url: "/",
					},
					{
						id: 4,
						name: "更多分类",
						img: "/static/img/icon_05.png",
						url: "/",
					},
				],
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
